//几何体 父子关系 相对位置
import { useEffect } from 'react'
import * as THREE from 'three'
import './App.css'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
function App() {

  useEffect(() => {

    // 创建场景
    const scene = new THREE.Scene()

    // 创建相机
    const camera = new THREE.PerspectiveCamera(
      45,//相机的角度
      window.innerWidth / window.innerHeight,//相机的宽高比
      0.1,//相机的近截面
      1000//相机的远截面
    )


    // 创建渲染器
    const renderer = new THREE.WebGLRenderer()
    renderer.setSize(window.innerWidth, window.innerHeight)//设置渲染尺寸
    document.body.appendChild(renderer.domElement)//将渲染器添加到文档中


    // 创建几何体
    const geometry = new THREE.BoxGeometry(1, 1, 1)
  
    // 创建材质
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
    const pmaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 })
    // 创建网格
    const cube = new THREE.Mesh(geometry, material)

    // 创建父元素
    const pcube = new THREE.Mesh(geometry, pmaterial)
    
    // 父元素添加子元素
    pcube.add(cube)

    // 更改位置
    // cube.position.x = 2
    cube.position.set(2,0,0)
    // 父元素位置
    pcube.position.set(-2,0,0)
    // 将网格添加到场景中
    scene.add(pcube)

    // 设置相机位置
    camera.position.z = 5
    camera.position.y = 2
    camera.position.x = 2
    camera.lookAt(0,0,0)


    // 添加世界坐标辅助器
    const axesHelper = new THREE.AxesHelper(5)
    scene.add(axesHelper)


    // 创建轨道控制器
    const controls = new OrbitControls(camera, renderer.domElement)
    // 阻尼
    controls.enableDamping = true
    // 旋转
    controls.enableRotate = true
    // 缩放
    controls.enableZoom = true
    // 设置阻尼系数
    controls.dampingFactor = 0.05
    // 自动旋转
    // controls.autoRotate = true


    // 渲染
    renderer.render(scene, camera)

    // 渲染函数
    function animate() {
      requestAnimationFrame(animate)
      // 更新轨道控制器
      controls.update()
      // 旋转
      // cube.rotation.x += 0.01
      // cube.rotation.y += 0.01
      renderer.render(scene, camera)
    }
    // 调用渲染函数
    animate()

    // 监听窗口变化
    window.addEventListener('resize', () => {
      // 更新相机
      camera.aspect = window.innerWidth / window.innerHeight
      camera.updateProjectionMatrix()
      // 更新渲染器
      renderer.setSize(window.innerWidth, window.innerHeight)
      renderer.setPixelRatio(window.devicePixelRatio)
    })

    var btn = document.createElement('button')
    btn.innerHTML = '点击全屏'
    document.body.appendChild(btn)

    btn.style.position = 'absolute'
    btn.style.top = '10px'
    btn.style.left = '10px'

    btn.addEventListener('click', () => {
      // 切换全屏
      document.body.requestFullscreen()

      // if (document.fullscreenElement) {
      //   document.exitFullscreen()
      // } else {
      //   document.documentElement.requestFullscreen()
      // }
      // 重新渲染
      renderer.render(scene, camera)
    })

  }, [])
  return (
    <>
   
    </>
  )
}

export default App
